<template>
	<el-card>
		<div slot="header" class="clearfix">
			<span>账户资料</span>
		</div>
		<el-form label-position="right" label-width="80px" :model="form" ref='form' :rules='rules'>
			<el-form-item label="用户名" prop='username'>
				<el-input v-model="form.username" disabled ></el-input>
			</el-form-item>
			<el-form-item label="姓名" prop='fullname'>
				<el-input v-model="form.fullname" ></el-input>
			</el-form-item>
			<el-form-item label="性别">
				<el-radio-group v-model="form.sex">
					<el-radio label="男"></el-radio>
					<el-radio label="女"></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="手机" prop="tel">
				<el-input v-model="form.tel" ></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop='email'>
				<el-input v-model="form.email" ></el-input>
			</el-form-item>
			<el-form-item label="头像" prop='avatar'>
				<single-upload :src.sync="form.avatar" upload-action='/api/upload/common' remove-action='/api/upload' :headers='header' :data="{type:'avatar'}" >
				</single-upload>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click='handleEdit'>修改资料</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
	import { User, Upload } from '@/api';
	import SingleUpload from '../../components/SingleUpload.vue';
	export default {
	components: {
		SingleUpload,
	},
		data() {
			return {
				header: {
					Authorization: `Bearer ${sessionStorage.token}`,
				},
				form: {
					username: '',
					fullname: '',
					sex: '女',
					tel: '',
					email: '',
					avatar: '',
				},
				rules: {
					username: [
						{ type: 'string', required: true, message: '请输入账户名称', trigger: 'blur' },
						{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
					],
					fullname: [
						{ type: 'string', required: true, message: '请输入姓名', trigger: 'blur' },
						{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' },
					],
					tel: [
						{ required: true, message: '请输入手机号码', trigger: 'blur' },
						{
							pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
							message: '请正确输入手机号',
							trigger: 'blur'
						},
					],
					email: [
						{ required: true, message: '请输入邮箱', trigger: 'blur' },
						{
							pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
							message: '请正确输入邮箱',
							trigger: 'blur'
						},
					],
					avatar: [
						{ required: true, message: '请上传头像', trigger: 'blur' },
					],
					agree: [
						{ required: true, message: '是否同意本协议', trigger: 'blur' },
					],
				},
			};
		},
		created() {
			this.form = { ...this.$store.state.account }
		},
		methods: {
			handleEdit() {
				this.$refs.form.validate(async (valid) => {
					if (valid) {
					let{status,msg} = await this.$store.dispatch('updateInfo',{...this.form});
					if (status) {
						this.$message.success(msg);
						//跳转页面
						// this.$router.replace('/users/list')
					} else {
						this.$message.error(msg)
					}
					}
			
				});
			},
			// handleAvatarSuccess(res, file) {
			// 	console.log(res)
			// 	if (res.status) {
			// 		this.form.avatar = res.src;
			// 		this.$message.success(res.msg)
			// 	}


			// },
			// beforeAvatarUpload(file) {
			// 	const isJPG = file.type === 'image/jpeg';
			// 	const isLt2M = file.size / 1024 / 1024 < 2;

			// 	if (!isJPG) {
			// 		this.$message.error('上传头像图片只能是 JPG 格式!');
			// 	}
			// 	if (!isLt2M) {
			// 		this.$message.error('上传头像图片大小不能超过 2MB!');
			// 	}
			// 	return isJPG && isLt2M;
			// },
			// handleAvatarError(err, res, file) {
			// 	console.log(err);
			// 	let { status, message } = err;
			// 	let { msg } = JSON.parse(message);
			// 	this.$message.error(msg)
			// },
			// async handleRemoveAvatar() {
			// 	//判断是否默认头像
			// 	let isDefault = this.form.avatar.indexOf('default') > -1;
			// 	console.log('是否是默认头像', isDefault);
			// 	//默认头像,不做物理删除
			// 	if (isDefault) {
			// 		this.form.avatar = '';
			// 		return;
			// 	}
			// 	//不是默认头像,物理删除
			// 	let { status, } = await Upload.remove({ src: this.form.avatar });
			// 	if (status) {
			// 		this.form.avatar = '';
			// 		this.$message.success('删除成功');

			// 	}
			// }
		}
	}
</script>
<style lang="less">
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;

		.cover {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, 0.5);
			color: white;
			font-size: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			transition: all 0.5s;
		}

		&:hover .cover {
			opacity: 1;
		}
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px !important;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}
</style>
